<template>
	<view class="box">
		<view class="content">
			<view class="title">您在这里可以点击扫码查询药品信息。</view>
			<view>1. 点击下方的扫码按钮。</view>
			<view>2. 将相机对准药品的二维码。</view>
			<view>3. 等待程序返回的药品信息。</view>
			<view class="info">4. 药品信息仅作为参考,具体用量请遵守医师嘱咐。</view>
		</view>
		<button type="primary" @click="search">扫码</button>

		<view class="title">
			搜索历史
		</view>

		<view v-for="item in searchData" :key="item.bar_code">
			<uni-group mode="card" :title="item.drugName">
				<view class="medicine">
					<view @click="previewDrugImage(item.image)">
						<image :src="item.image"></image>
					</view>
					<view class="main">
						<view class="top">
							<view class="brand">{{ item.drugBrand }}</view>
							<view>
								<view :class="item._otc ? 'otc' : 'rx'">{{ item._otc ? 'OTC' : 'RX' }}</view>
								<view class="del" @click="showAlertDialog(item.bar_code)">删除</view>
							</view>
						</view>
						<view class="suggest">
							<view>{{ item.dosage }}</view>
						</view>
						<view class="suggestInfo">
							信息仅作为参考
						</view>
					</view>
				</view>
			</uni-group>
		</view>


		<!-- 提示窗示例 -->
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="关闭" confirmText="同意" title="警告" content="你确认要删除此药品记录吗?"
					@confirm="deleteDrugRecord"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchData: [],
			currBarcode: ''
		};
	},
	methods: {
		async getDrugList() {
			const { data } = await uni.$http.get('/drugDetails/findRecords')
			if (data.code == 200)
				this.searchData = data.drugDetails
		},
		search() {
			uni.scanCode({
				success: (res) => {
					console.log(res.result);
					uni.$http.get(`/drugDetails/find/${res.result}`).then(({ data }) => {
						console.log(data);
						if (data.code == 200)
							this.getDrugList()
						if (data.code == 201)
							uni.$showMsg('正在收录该药品, 请稍后尝试')
					}).catch(err => {
						console.log('查询药品信息出错了', err);
					})
				}
			});
		},
		previewDrugImage(url) {
			uni.previewImage({
				urls: [url],
				current: 1
			})
		},
		showAlertDialog(barcode) {
			this.currBarcode = barcode + ''
			this.$refs.alertDialog.open()
		},
		async deleteDrugRecord() {
			const { data } = await uni.$http.delete(`/drugDetails/deleteRecord/${this.currBarcode}`)
			console.log(data);
			if (data.code == 200) {
				uni.$showMsg('删除药品成功')
				this.getDrugList()
			}
		}
	},
	onLoad() {
		this.getDrugList()
	}
}
</script>

<style lang="less" scoped>
.box {
	padding: 10rpx;

	.content {
		padding: 0rpx 0;
		font-size: 35rpx;
		line-height: 45rpx;

		.title {
			line-height: 60rpx;
			font-size: 40rpx;
			font-weight: 600;
		}

		.info {
			color: #ccc;
			font-size: 30rpx;
		}
	}

	.title {
		font-size: 35rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		line-height: 65rpx;
		border-bottom: 2px solid #ccc;
	}
}



/deep/.uni-group__title .uni-group__title-text {
	font-size: 45rpx;
	color: black;
	font-weight: 700;
}

.medicine {
	display: flex;
	font-size: 38rpx;

	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.main {
		flex: 1;
		padding-left: 20rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;

		.brand {
			line-height: 60rpx;
			font-size: 45rpx;
			font-weight: 700;
		}
	}
}

.otc,
.rx,
.del {
	margin-top: -96rpx;
	background-color: rgb(66, 185, 131);
	padding: 10rpx;
	border-radius: 10rpx;
	font-size: 30rpx;
	margin-bottom: 20rpx;
	margin-right: -15rpx;
	text-align: center;
	color: white;
}

.rx {
	background-color: orange;
}

.del {
	margin-top: 0;
	background-color: rgb(215, 31, 31);
}

.suggest {
	border-top: 1px solid #ccc;
	padding-top: 10rpx;
}

.suggestInfo {
	font-size: 30rpx;
	color: #ccc;
	text-align: right;
}
</style>
